<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/homeIndex' }">
        <i class="el-icon-house"></i> 床位管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>床位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    
    <el-row>
      <el-col :span="24" class="col-in-page">
        <!-- 放搜索条件 
        :inline="ture"让表单元素占一行,一行不够会换行-->
        <el-form :inline="true">
          <el-form-item label="老人姓名">
            <el-input v-model="orderParam.userName" placeholder="老人姓名"></el-input>
          </el-form-item>
          <el-form-item label="转房时间">
            <el-date-picker v-model="orderParam.createTime" placeholder="登记时间"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryUser">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="clear">重置</el-button>
          </el-form-item>
          
        </el-form>
      </el-col>

      <el-col :span="24" class="col-in-page">
        <!-- 放表格数据 -->
        <el-button type="danger" icon="el-icon-plus" @click="putawayVisible=true">新建转房</el-button>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="userNum" label="档案编码" width="180"></el-table-column>
          <el-table-column prop="userName" label="老人姓名" width="180"></el-table-column>
          <el-table-column prop="userGender" label="性别" width="180">
            <template slot-scope="scope">{{scope.row.userGender == 0?"女":"男"}}</template>
          </el-table-column>
          <el-table-column prop="areaName" label="入住区域" width="180"></el-table-column>
          <el-table-column prop="preRoomnum" label="入住房间" width="180"></el-table-column>
          <el-table-column prop="preNumber" label="原床位" width="180"></el-table-column>
          <el-table-column prop="prePrice" label="原床位金额" width="180">
            <template slot-scope="scope">{{ scope.row.prePrice }}元</template>
          </el-table-column>
          <el-table-column prop="nowRoomnum" label="转入房间" width="180"></el-table-column>
          <el-table-column prop="nowNumber" label="转入床位" width="180"></el-table-column>
          <el-table-column prop="nowPrice" label="转入床位金额" width="180">
            <template slot-scope="scope">{{ scope.row.nowPrice }}元</template>
          </el-table-column>
          <el-table-column prop="createTime" label="转房时间" width="180"></el-table-column>
          <el-table-column prop="empName" label="操作员" width="180"></el-table-column>
        </el-table>
        <el-pagination
          background
          :page-sizes="[3, 5, 10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </el-col>  
    </el-row>

    <!-- 新增转房的弹框 label-width:是label文字占的宽度-->
    <el-dialog title="转房" :visible.sync="putawayVisible">
      <el-form>
        <div style="position: relative; margin-top: 20px;">
          <span style="position: absolute; top: -15px; background: white; padding: 0 10px;">老人信息</span>
          <el-card class="box-card">
            <el-row>
              <el-col :span="12">
                <el-form-item label="老人姓名" label-width="100px" required="">
                  <el-input v-model="user.name" @focus="lookVisible=true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="老人档案" label-width="100px">
                  <el-input v-model="user.userNum" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入院时间" label-width="100px">
                  <el-input v-model="user.inTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <div style="position: relative; margin-top: 20px;">
          <span style="position: absolute; top: -15px; background: white; padding: 0 10px;">原始床位</span>
          <el-card class="box-card">
            <el-row>
              <el-col :span="12">
                <el-form-item label="入院区域" label-width="100px">
                  <el-input v-model="user.areaName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入院房间" label-width="100px">
                  <el-input v-model="user.roomnum" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="床位号" label-width="100px">
                  <el-input v-model="user.number" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="床位价格" label-width="100px">
                  <el-input v-model="user.bedPrice" disabled>
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <div style="position: relative; margin-top: 20px;">
          <span style="position: absolute; top: -15px; background: white; padding: 0 10px;">更换床位</span>
          <el-card class="box-card" shadow="hover" style="border: 1px solid blue;">
            <el-row>
              <el-col :span="12">
                <el-form-item label="转入房间" label-width="100px" required="">
                  <el-select
                    v-model="changeRoom.nowRoomid"
                    @change="handleRoomChange"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="room in roomList"
                      :key="room.id"
                      :label="room.roomnum"
                      :value="room.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="床位号" label-width="100px" required="">
                  <el-select
                    v-model="changeRoom.nowNumber"
                    placeholder="请选择"
                    @change="handleBedChange"
                  >
                    <el-option
                      v-for="bed in bedList"
                      :key="bed.id"
                      :label="bed.number"
                      :value="bed.id"
                    >
                      {{bed.number}}
                      <span
                        :class="{ 'red': bed.enable, 'gray': !bed.enable }"
                      >- {{bed.enable ? '已占用' : '空床'}}</span>
                      <span
                        :class="{ 'green': bed.status, 'red': !bed.status }"
                      >- {{ bed.status ? '已启用' : '已禁用' }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入院区域" label-width="100px">
                  <el-input v-model="user.areaName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="床位价格" label-width="100px">
                  <el-input v-model="changeRoom.nowPrice" disabled>
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="更换原因" label-width="100px">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                placeholder="添加备注..."
                v-model="changeRoom.remark"
              ></el-input>
            </el-form-item>
            <p>当前操作人 : {{ operator.name }}</p>
          </el-card>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="putawayVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChangeRoom">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看老人的的弹框 label-width:是label文字占的宽度-->
    <el-dialog title="选择老人" :visible.sync="lookVisible" @change="handleUserChange">
      <el-row>
        <el-col :span="24">
          <!-- 放搜索条件 
          :inline="ture"让表单元素占一行,一行不够会换行-->
          <el-form :inline="true">
            <el-form-item label="老人姓名">
              <el-input
                v-model="orderParam1.name"
                placeholder="老人姓名"
                suffix-icon="el-icon-search"
                @click.native="queryInCare"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-table :data="selectData" style="width: 100%" @row-click="selectUser">
            <el-table-column prop="userNum" label="档案编码" width="180"></el-table-column>
            <el-table-column prop="name" label="老人姓名" width="180"></el-table-column>
            <el-table-column prop="userGender" label="性别" width="180">
              <template slot-scope="scope">{{scope.row.userGender == 0?"女":"男"}}</template>
            </el-table-column>
            <el-table-column prop="age" label="老人年龄" width="180"></el-table-column>
            <el-table-column prop="areaName" label="入住区域" width="180"></el-table-column>
            <el-table-column prop="roomnum" label="入住房间" width="180"></el-table-column>
            <el-table-column prop="number" label="床位号" width="180"></el-table-column>
            <el-table-column prop="inTime" label="入院时间" width="180"></el-table-column>
            <el-table-column prop="empName" label="操作员" width="180"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <span style="color: blue; cursor: pointer;" @click="selectUser(scope.row)">选择</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- 放分页部分 -->
          <el-pagination
            background
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize1"
            :current-page="pageNum1"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage1"
            @prev-click="prevPage1"
            @size-change="sizeChange1"
            @current-change="currentPage1"
            :total="total1"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
        
  <script>
export default {
  data() {
    return {
      bedid: "",
      areaid: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      pageNum1: 1,
      pageSize1: 5,
      total1: 0,
      putawayVisible: false,
      lookVisible: false,
      orderParam: {
        userName: "",
        createTime: ""
      },
      orderParam1: {
        name: ""
      },
      tableData: [],
      selectData: [],
      user: {},
      userList: [],
      roomList: [],
      bedList: [],
      changeRoom: {},
      operator: {} //当前操作人,
    };
  },
  methods: {
    clear() {
      this.orderParam.createTime = "";
      this.orderParam.userName = "";
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryUser();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryUser();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryUser();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryUser();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryUser();
    },
    prevPage1(val) {
      //点击上一页触发
      this.pageNum1 = val;
      this.queryInCare();
    },
    nextPage1(val) {
      //点击下一页触发
      this.pageNum1 = val;
      this.queryInCare();
    },
    sizeChange1(val) {
      //val每一页条数
      this.pageNum1 = 1;
      this.pageSize1 = val;
      this.queryInCare();
    },
    currentPage1(val) {
      this.pageNum1 = val;
      this.queryInCare();
    },
    queryCondition1() {
      thispageNum1 = 1;
      this.queryInCare();
    },
    queryUser() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      if (this.orderParam.createTime != "") {
        this.orderParam.createTime = this.$moment(
          this.orderParam.createTime
        ).format("YYYY-MM-DD");
      }
      this.$axios
        .post("api/changeRoom/queryChangeRoom", pageParam)
        .then(res => {
          if (res.data.code == 200) {
            let pageData = res.data.data;
            this.tableData = pageData.list;
            //给分页参数赋值
            this.total = pageData.total;
            this.pageNum = pageData.pageNum;
            this.pageSize = pageData.pageSize;
          }
        });
    },
    addChangeRoom() {
      let changeRoomDTO = {
        user: this.user,
        changeRoom: this.changeRoom,
        empid: this.operator.id
      };
      this.$axios
        .post("api/changeRoom/addChangeRoom", changeRoomDTO)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功!");
            // 重新初始化数据
            this.resetForm();

            // 重新获取数据
            this.queryUser();
            this.queryInCare();
            this.queryOperator();

            this.putawayVisible = false;

            this.$router.push({ path: "/bedList" });
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //查询当前操作人
    queryOperator() {
      this.$axios.get("api/employee/queryOperator").then(res => {
        if (res.data.code == 200) {
          this.operator = res.data.data;
        }
      });
    },
    //查看住院状态老人
    queryInCare() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum1;
      pageParam.pageSize = this.pageSize1;
      pageParam.param = this.orderParam1;
      this.$axios.post("api/changeBed/queryInCare", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.selectData = pageData.list;
          //给分页参数赋值
          this.total1 = pageData.total;
          this.pageNum1 = pageData.pageNum;
          this.pageSize1 = pageData.pageSize;
        }
      });
    },
    selectUser(row, event) {
      this.user = row;
      this.lookVisible = false;
      this.putawayVisible = true;
      this.resetForm(); //在这里调用 resetForm
      this.user = row;
      // 获取房间信息
      this.$axios.get(`api/bed/queryByAreaId/${row.areaId}`).then(res => {
        if (res.data.code === 200) {
          let originalRoomList = res.data.data;
          // 使用 Array.prototype.filter() 去除当前房间
          this.roomList = originalRoomList.filter(
            room => room.id !== row.roomId
          );
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleBedChange(value) {
      let bed = this.bedList.find(bed => bed.id == value);
      if (bed && (bed.enable === 1 || bed.status === 0)) {
        this.$message({
          message: "该床位无法选择",
          type: "warning"
        });
        this.changeRoom.nowNumber = null;
      }
    },
    handleRoomChange(roomId) {
      this.$axios.get(`api/bed/queryRoomByRoomId/${roomId}`).then(res => {
        if (res.data.code === 200) {
          this.$set(this.changeRoom, "nowPrice", res.data.data.price);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleUserChange() {
      this.changeRoom.nowRoomid = null;
      this.changeRoom.nowPrice = null;
    },
    resetForm() {
      this.user = {};
      this.changeRoom = {};
      this.roomList = [];
      this.bedList = [];
    },
    queryByAreaId() {
      // 获取房间信息
      this.$axios.get("api/bed/queryUserByBedId/" + this.bedid).then(res => {
        if (res.data.code == 200) {
          this.user = res.data.data;
          this.areaid = this.user.areaId;
          this.$axios.get("api/bed/queryByAreaId/" + this.areaid).then(res => {
            if (res.data.code === 200) {
              let originalRoomList = res.data.data;
              this.putawayVisible = true;
              // 使用 Array.prototype.filter() 去除当前房间
              this.roomList = originalRoomList.filter(
                room => room.id !== this.user.roomId
              );
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    }
  },
  created() {
    this.bedid = this.$route.query.bedid;
    this.queryOperator();
    this.queryUser();
    this.queryInCare();
  },
  watch: {
    "changeRoom.nowRoomid": function(newVal, oldVal) {
      if (newVal) {
        this.$axios.get(`api/bed/queryBedByRoomId/${newVal}`).then(res => {
          if (res.data.code === 200) {
            this.bedList = res.data.data;
            // check if all beds are unavailable
            const availableBeds = this.bedList.filter(
              bed => !bed.enable && bed.status
            );
            if (availableBeds.length === 0) {
              this.$message({
                message: "没有可以选择的床位, 请换房",
                type: "warning"
              });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    }
  },
  mounted() {
    if (this.bedid) {
      this.queryByAreaId();
    }
  },
  computed: {
    genderText() {
      return this.employee.gender == 0 ? "女" : "男";
    }
  }
};
</script>
        
  <style scoped>
.red {
  color: red;
}
.gray {
  color: gray;
}
.green {
  color: green;
}
.el-table {
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.el-form-item {
  margin: 10px 50px;
}
.el-button {
  border-radius: 20px;
  text-align: center; /* 文字居中  */
  border: none;
  color: white; /* 文字颜色白色  */
  cursor: pointer;
  display: inline-block;
  background: linear-gradient(
    to right,
    rgb(176, 119, 218),
    rgb(129, 214, 238)
  ); /* 渐变效果更换为浅紫色到浅蓝色 */
  transition-property: background-color, transform; /* 添加过渡属性 */
  transition-duration: 0.3s; /* 过渡持续时间 */
}

.el-button:hover {
  transform: scale(1.1); /* 按钮放大效果  */
  transition: transform .3s ease-in-out;
}

.el-pagination {
  margin-top: 20px; /* 或者你觉得合适的值 */
}
.col-in-page {
  position: relative;
  margin: 1rem;
  padding: 2.5rem;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background: linear-gradient(60deg, #c4dcda 0%, #96e4e1 100%);
}
.el-pagination {
  margin-top: 20px; /* 或者你觉得合适的值 */
}
.form-required:before {
  content: "*";
  color: red;
}
</style>